<%@ page language="java" pageEncoding="utf-8" isELIgnored="false" import="com.onlineclass.bean.Course"%>

<%String title=((Course)request.getAttribute("course")).getTitle(); %>

<%@ include file="header.jsp" %>

<!--课程大图START-->
<div class="container-fluid shadow-sm">
	<div class="container py-3">
		<nav aria-label="breadcrumb">
		  <ol class="breadcrumb bg-white">
		    <li class="breadcrumb-item">编程课程列表</li>
		    <li class="breadcrumb-item active" aria-current="page">${course.title}</li>
		  </ol>
		</nav>
		<!--课程图片区域START-->
		<div class="row">
			<div class="col-5" style="">
				<img src="${course.img}" class="rounded" width="100%" />
				<p class="mt-3 text-muted">信用卡 • 花呗 放心购，7天内不满意可退款</p>
			</div>
			<div class="col-6">
				<h3>${course.title}</h3>
				<div class="text-muted">&nbsp;&nbsp;${course.sections} 节&nbsp;&nbsp;|&nbsp;&nbsp;283 个小点&nbsp;&nbsp;|&nbsp;&nbsp;${course.hots}人气&nbsp;&nbsp;</div>
				<hr/>
				<div class="my-2 text-muted">你还未获得该课程证书，快去完成课程领取吧!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i class="fa fa-credit-card-alt text-danger" aria-hidden="true"> 领取证书</i></div>
				<div class="my-3">
					<span class="h3 text-danger mr-5">¥${course.price}</span>
					<span class="bg-warning p-2 rounded text-secondary small">开通VIP会员，本门课程免费学 <a href="" class="btn-danger p-1 rounded-pill">立即开通</a></span>
				</div>
				<input type="hidden" name="userId" value="${sessionScope.user.id}"/>
				<div class="" style="margin-top:38px"><button class="btn btn-warning mr-3" id="btnAddCart">加到购物车</button><button class="btn btn-danger">立即下单</button></div>
			</div>
		</div>
		<!--课程图片区域END-->
	</div>
</div>
<!--课程大图END-->

<!--课程详情START-->
<div class="container-fluid bg-light py-3" style="">
	<div class="container">
		<div class="row">
			<div class="col-8 bg-white mr-1 p-2">
				<div class="border-bottom p-3 mb-3 tab-nav">
					<a href="#" class="text-danger h6">课程介绍</a>
					<a href="#" class="h6">课程目录</a>
					<a href="#" class="h6">评价</a>
				</div>
				<div class="course-content">
					${course.content}
					
					<!-- <img src="https://7n.w3cschool.cn/attachments/image/20190626/1561533040466127.png" width="100%" /> -->
					<pre class="h6 mt-2">
购买须知
1. 本课程为图文内容+闯关形式，共60节。
2. 在课程学习中，如有任何使用上的问题，请联系客服微信号：bcshi666
（加微信可进相关交流群，与更多小伙伴讨论问题）。 
					</pre>
				</div>
			</div>
			<div class="col-3 bg-white p-3">
				<h6 class="border-bottom py-2">推荐课程</h6>
				<c:forEach items="${relatedCourses}" var="c">
				<div class="clearfix mb-3">
					<img src="${c.img}" width="35%" class="rounded-lg pull-left" />
					<div class="pull-left ml-2">
						<span>${fn:substring(c.title,0,10)}..</span><br/><small class="text-muted">${c.hots}人气</small>
					</div>
				</div>
				</c:forEach>

			</div>
		</div>
	</div>
</div>
<!--课程详情END-->

<%@ include file="footer.jsp" %>
<script>
$(function(){
	$('#btnAddCart').click(function(){
		var userId = $('[name=userId]').val();
		if(userId==''){
			location.href='login.jsp';
		}else{
			//加到购物车，把课程id传到后端
			$.get('my/addCart.do', {courseId: ${param.id}, userId:userId}, function(data){
				console.log(data);
				if(data.nums==1) {
					layer.alert("加入购物车成功", {title:false, closeBtn:0, time:1500});
				} else {
					layer.alert("你已经添加了该课程", {title:false, closeBtn:0, time:1500});
				}
			})
			
		}
	})
	
})
</script>
</body>
</html>